import React from 'react';
import { Tabs } from 'antd';
import "./pay.scss"
import Forms from "./form"
import {useSelector} from 'react-redux';

function Pay() {
    const languages = useSelector((state) =>state).publicReducer.language
    const onChange = (key) => {
        console.log(key);
    };

    const items = [
        {
            label: `XRP`,
            key: '1',
            children: <div className='Tabs'>
                <ul>
                    <li>{languages==='Korean'?'가상자산으로 결제하기 위해서는 먼저 보내는 지갑주소를 입력해야만 합니다.':languages==="English"?'To pay with virtual assets, you must first enter the wallet address to send.':'要使用虚拟资产付款，您必须先输入要发送的钱包地址。'}</li>
                    <li>{languages==='Korean'?'입력하신 지갑주소가 보내는 주소와 다를 시 지불확인이 안됩니다.':languages==="English"?'If the wallet address you entered is different from the address you sent, the payment cannot be confirmed.':'如果您输入的钱包地址与发送的地址不同，无法确认付款。'}</li>
                    <li>{languages==='Korean'?'확인 후 송금하여 주시기 바랍니다.':languages==="English"?'Please make remittance after confirmation.':'请确认后汇款。'}</li>
                    <p>{languages==='Korean'?'업비트 주소를 입력해 주세요.':languages==="English"?'Please enter the Upbit address.':'请输入Upbit地址。'}</p>
                    <Forms labels={{ label1: languages==='Korean'?"My XRP 주소":languages==="English"?'My XRP address':'My XRP地址', label2: languages==='Korean'?"데스티네이션 테그":languages==="English"?"Destiny label":'目的地标签', Submit: languages==='Korean'?"확인":languages==="English"?'Confirm':'确认' }}></Forms>
                </ul>
                <ul>
                    <li>{languages==='Korean'?'2만원은 현재가 525원 기준으로 38.095개 입니다.':languages==="English"?'The current 525 won of 20000 won is 38.095.':'2万韩元以现在的525韩元为准是38.095个。'}</li>
                    <li>{languages==='Korean'?'아래 주소로 입금 하신 후 입금 완료 버튼을 눌러주세요.':languages==="English"?'After remittance to the following address, please press the remittance completion button.':'汇款到以下地址后，请按汇款完成按钮。'}</li>
                    <Forms labels={{ label1: languages==='Korean'?"입금 XRP 주소":languages==="English"?'Remittance XRP address':'汇款XRP地址', label2: languages==='Korean'?"데스티네이션 테그":languages==="English"?"Destiny label":'目的地标签', Submit: languages==='Korean'?"입금 완료":languages==="English"?'Remittance completed':'汇款完成' }}></Forms>
                </ul>
            </div>,
        },
        {
            label: `EOS`,
            key: '2',
            children: <div className='Tabs'>
                <ul>
                    <li>{languages==='Korean'?'가상자산으로 결제하기 위해서는 먼저 보내는 지갑주소를 입력해야만 합니다.':languages==="English"?'To pay with virtual assets, you must first enter the wallet address to send.':'要使用虚拟资产付款，您必须先输入要发送的钱包地址。'}</li>
                    <li>{languages==='Korean'?'입력하신 지갑주소가 보내는 주소와 다를 시 지불확인이 안됩니다.':languages==="English"?'If the wallet address you entered is different from the address you sent, the payment cannot be confirmed.':'如果您输入的钱包地址与发送的地址不同，无法确认付款。'}</li>
                    <li>{languages==='Korean'?'확인 후 송금하여 주시기 바랍니다.':languages==="English"?'Please make remittance after confirmation.':'请确认后汇款。'}</li>
                    <p>{languages==='Korean'?'업비트 주소를 입력해 주세요.':languages==="English"?'Please enter the Upbit address.':'请输入Upbit地址。'}</p>
                    <Forms labels={{ label1:languages==='Korean'?"My EOS 주소":languages==="English"?'My EOS address':'My EOS地址', label2: "MEMO", Submit: languages==='Korean'?"확인":languages==="English"?'Confirm':'确认' }}></Forms>
                </ul>
                <ul>
                    <li>{languages==='Korean'?'2만원은 현재가 1260원 기준으로 15.873개 입니다.':languages==="English"?'The current 1260 won of 20000 won is 15.873.':'2万韩元以现在的1260韩元为准是15.873个。'}</li>
                    <li>{languages==='Korean'?'아래 주소로 입금 하신 후 입금 완료 버튼을 눌러주세요.':languages==="English"?'After remittance to the following address, please press the remittance completion button.':'汇款到以下地址后，请按汇款完成按钮。'}</li>
                    <Forms labels={{ label1: languages==='Korean'?"입금 EOS 주소":languages==="English"?'Remittance EOS address':'汇款EOS地址', label2: "MEMO", Submit: languages==='Korean'?"입금 완료":languages==="English"?'Remittance completed':'汇款完成' }}></Forms>
                    <p>{languages==='Korean'?'입금을 확인하고 있습니다.':languages==="English"?'Confirming remittance.':'正在确认汇款'}</p>
                </ul>
            </div>,
        },
        {
            label: languages==='Korean'?'신용카드':languages==="English"?'Credit Card':'信用卡',
            key: '3',
            children: <aside>{languages==='Korean'?'서비스 준비 중 입니다.':languages==="English"?'Preparing service.':'“正在准备服务。'}</aside>,
        },
    ]
    return (
        <div className='pay'>
            <div className='main'>
                <hgroup>{languages==='Korean'?'결제하실 수단을 선택하세요.':languages==="English"?'Please select a payment method.':'请选择付款方式。'}</hgroup>
                <Tabs defaultActiveKey="1" onChange={onChange} items={items} />
            </div>
        </div>
    );
}
export default Pay;